<template>
	<div class="product_con">
		<el-row>
			<el-col class="title-col" :span="24"
				><div class="grid-content bg-purple-dark product-title">
					<div><span class="iconfont">&#xe618;</span>添加商品</div>
				</div></el-col
			>
		</el-row>
		<div style="margin: 20px;"></div>
		<el-form
			:model="listQuery"
			label-width="120px"
			:rules="rules"
			ref="ruleForm"
			class="demo-ruleForm"
			label-position="left"
		>
			<el-form-item label="商品分类" prop="product_category_id">
				<el-cascader v-model="productCateValue" :options="productCateOptions">
				</el-cascader>
			</el-form-item>
			<el-form-item label="商品名称" prop="name">
				<el-input v-model="listQuery.name" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="副标题" prop="sub_title">
				<el-input v-model="listQuery.sub_title" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="商品品牌" prop="brand_id">
				<el-select
					v-model="listQuery.brand_id"
					placeholder="全部"
					style="width:250px;"
				>
					<el-option
						v-for="item in brandOptions"
						:label="item.name"
						:value="item.id"
						:key="item.id"
					></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="商品介绍" prop="description">
				<el-input
					type="textarea"
					v-model="listQuery.description"
					style="width:500px;"
				></el-input>
			</el-form-item>
			<el-form-item label="图片链接地址" prop="pic">
				<el-input v-model="listQuery.pic" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="商品货号" prop="product_sn">
				<el-input
					v-model="listQuery.product_sn"
					style="width:500px;"
				></el-input>
			</el-form-item>
			<el-form-item label="商品售价" prop="price">
				<el-input v-model="listQuery.price" style="width:500px;"></el-input>
			</el-form-item>
			<el-form-item label="市场价" prop="original_price">
				<el-input
					v-model="listQuery.original_price"
					style="width:200px;"
				></el-input>
			</el-form-item>
			<el-form-item label="商品库存" prop="stock">
				<el-input v-model="listQuery.stock" style="width:200px;"></el-input>
			</el-form-item>
			<el-form-item label="计量单位" prop="unit">
				<el-input v-model="listQuery.unit" style="width:200px;"></el-input>
			</el-form-item>
			<el-form-item label="商品重量" prop="weight">
				<el-input v-model="listQuery.weight" style="width:200px;"></el-input>克
			</el-form-item>
			<el-form-item label="排序" prop="sort">
				<el-input v-model="listQuery.sort" style="width:100px;"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')"
					>添加商品</el-button
				>
				<el-button @click="resetForm('ruleForm')">重置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>
<script>
import { addProduct } from "@/api/product";
import productmixing from "./productmixing";
export default {
	name: "productadd",
	data() {
		return {
			labelPosition: "left",
			listQuery: {
				brand_id: null, //商品品牌id
				brand_name: "", //商品品牌名称
				delete_status: 0, //删除标志位，默认填0，表示未删除
				description: "", //商品介绍
				name: "", //商品名称
				original_price: 0, //市场价
				pic: "", //商品图片的url地址
				price: 0, //商品售价
				product_category_id: null, //分类id
				product_category_name: "", //分类名称
				product_sn: "", //商品货号
				sort: 0, //排序
				stock: 0, //商品库存
				sub_title: "", //副标题
				unit: "", //计量单位
				weight: 0, //商品重量
				sale: 0, //商品销量
				publish_status: 0, //上架
				new_status: 0, //新品
				recommand_status: 0, //推荐
				verify_status: 0, //审核状态
			},
			rules: {
				//验证规则
				product_category_id: [
					{ required: true, message: "请选择分类", trigger: "blur" },
				],
				name: [
					{ required: true, message: "请输入商品名称", trigger: "blur" },
					{ min: 3, max: 50, message: "长度在3-50个字符之间", trigger: "blur" },
				],
				sub_title: [
					{ required: true, message: "请输入副标题名称", trigger: "blur" },
				],
				brand_id: [{ required: true, message: "请选择品牌", trigger: "blur" }],
				description: [
					{ required: true, message: "请输入商品介绍", trigger: "blur" },
				],
				pic: [
					{ required: true, message: "请输入图片链接地址", trigger: "blur" },
				],
			},
		};
	},
	methods: {
		submitForm(formName) {
			//validate 是一个函数，功能是对表单进行验证
			//参数是回调函数， 回调函数中的参数 valid 的值可以是 true（验证通过） 或false（验证失败）
			//console.log(this.$refs[formName]);//element ui 封装的 表单组件
			console.log(this.$refs[formName]);
			this.$refs[formName].validate((valid) => {
				console.log(valid);
				if (valid) {
					console.log("可以提交表单");
					this.brandOptions.forEach((i) => {
						if (i.id == this.listQuery.brand_id) {
							this.listQuery.brand_name = i.name;
						}
					});
					this.productCateOptions.forEach((i) => {
						i.children.forEach((j) => {
							if (j.value == this.listQuery.product_category_id) {
								this.listQuery.product_category_name = j.label;
							}
						});
					});
					console.log(this.listQuery);
					//调用 后台接口,添加 商品数据
					addProduct(this.listQuery).then((res) => {
						console.log(res);
						if (res.status == 200) {
							this.$message({
								message: "商品记录添加成功~",
								type: "success",
							});
							this.$router.push("/pms/product");
						} else {
							console.log("验证失败");
							return false;
						}
					});
				}
			});
		},
	},
	mixins: [productmixing],
};
</script>
<style scoped lang="scss">
.product_con {
	margin: 10px;
	.title-col {
		border: 1px solid #ebeef5;
		margin-bottom: 10px;
		padding: 20px;
	}
}
</style>
